<template>
  <div id="drag-content" class="drag-content">
    <div id="drag-canvas" class="drag-canvas">
      <div
        id="drag-item"
        style="transform: scale(1); left: 0; top: 0; transform-origin: left top"
        class="drag-item">
        11111
      </div>
    </div>
    <canvas height="25" id="x-axis-canvas"></canvas>
    <div id="x-axis-line">
      <span id="x-axis-line-value"></span>
    </div>
    <canvas width="50" id="y-axis-canvas"></canvas>
    <div id="y-axis-line">
      <span id="y-axis-line-value"></span>
    </div>
  </div>
</template>

<script setup>
  import { onMounted, onUnmounted } from 'vue';
  import {
    axisCanvas,
    keyDownHandler,
    keyUpHandler,
    mouseDownHandler,
    mouseLeaveHandler,
    scaleHandler,
    setDragItemInitScale,
    xAxisMouseleaveHandler,
    xAxisMousemoveHandler,
    yAxisMouseleaveHandler,
    yAxisMousemoveHandler,
  } from '@/views/scaleDrag/useScaleDrag';

  onMounted(() => {
    //注册滚轮事件
    document.addEventListener('wheel', scaleHandler, {
      //禁止默认事件
      passive: false,
    });
    const dragEl = document.getElementById('drag-item');
    //注册键盘按下事件
    document.addEventListener('keydown', (e) => keyDownHandler(e, dragEl));
    //注册键盘抬起事件
    document.addEventListener('keyup', (e) => keyUpHandler(e, dragEl));
    //注册鼠标左键按下事件
    dragEl.addEventListener('mousedown', mouseDownHandler);
    //注册鼠标离开事件
    dragEl.addEventListener('mouseleave', mouseLeaveHandler);
    //鼠标X轴移动事件
    const xAxisCanvasEl = document.getElementById('x-axis-canvas');
    xAxisCanvasEl.addEventListener('mousemove', xAxisMousemoveHandler);
    //鼠标移出X轴事件
    xAxisCanvasEl.addEventListener('mouseleave', xAxisMouseleaveHandler);
    //鼠标Y轴移动事件
    const yAxisCanvasEl = document.getElementById('y-axis-canvas');
    yAxisCanvasEl.addEventListener('mousemove', yAxisMousemoveHandler);
    //鼠标移出Y轴事件
    yAxisCanvasEl.addEventListener('mouseleave', yAxisMouseleaveHandler);
    //初始化scale
    setDragItemInitScale();
    //绘制坐标轴
    axisCanvas();
  });
  onUnmounted(() => {
    const dragEl = document.getElementById('drag-item');
    const xAxisCanvasEl = document.getElementById('x-axis-canvas');
    const yAxisCanvasEl = document.getElementById('y-axis-canvas');
    document.removeEventListener('wheel', scaleHandler);
    document.removeEventListener('keydown', keyDownHandler);
    document.removeEventListener('keyup', keyUpHandler);
    dragEl.removeEventListener('mousedown', mouseDownHandler);
    dragEl.removeEventListener('mouseleave', mouseLeaveHandler);
    xAxisCanvasEl.removeEventListener('mousemove', xAxisMousemoveHandler);
    xAxisCanvasEl.removeEventListener('mouseleave', xAxisMouseleaveHandler);
    yAxisCanvasEl.removeEventListener('mousemove', yAxisMousemoveHandler);
    yAxisCanvasEl.removeEventListener('mouseleave', yAxisMouseleaveHandler);
  });
</script>

<style lang="less" scoped>
  .drag-content {
    position: relative;
    padding: 0;
    height: 80vh;
    width: 80vw;
    border: 1px solid #ddd;
    .drag-canvas {
      height: 100%;
      overflow: hidden;
      position: relative;
      user-select: none;
      .drag-item {
        height: 1080px;
        width: 1920px;
        background: #ccc;
        position: absolute;
        &[isKeydown='true'] {
          cursor: pointer;
        }
      }
    }
    #x-axis-canvas,
    #y-axis-canvas {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
    }
    #x-axis-line {
      display: none;
      position: absolute;
      top: 0;
      height: 100%;
      width: 1px;
      background: red;
    }
    #y-axis-line {
      display: none;
      position: absolute;
      left: 0;
      width: 100%;
      height: 1px;
      background: red;
    }
  }
</style>
